<template>
  <div class="head">
    <div class="warpper">
      <!-- 登录 -->
      <div class="header">
        <p class="tel">Ting域主持人欢迎您！ 客服：13601371065（卓越老师）</p>
        <div class="logReg" v-if="isShow">
          <router-link tag="p" to="/login" class="login">登录</router-link>
          <router-link tag="p" to="/register">注册</router-link>
        </div>
        <div class="user" v-else>
          欢迎您，{{ username }}
          <!-- <router-link :to="centerAddress" tag="span" style="padding: 0 10px">
            个人中心
          </router-link> -->
          <span style="padding: 0 10px" @click="changePath"> 个人中心 </span>
          <span @click="logout"> 退出登录 </span>
        </div>
      </div>
      <HeadBar />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import HeadBar from "./HeadBar";
export default {
  name: "HeadNav",
  components: {
    HeadBar,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("LoginModule", {
      username: (state) => state.user.username,
    }),
    ...mapState("isShow", {
      isShow: (state) => state.isShow,
    }),
  },
  mounted() {},
  methods: {
    ...mapMutations("LoginModule", ["clearState"]),
    ...mapMutations("isShow", ["setIsShow"]),
    handleNavSelect() {},
    /**
     * 退出登录
     */
    logout() {
      this.clearState();
      localStorage.removeItem("wedding");
      this.setIsShow(true);
      this.$message.info("退出成功");
      this.$router.push("/");
    },
    /**
     * 个人中心跳转
     */
    changePath() {
      var role = localStorage.getItem("wedding-role");
      switch (role) {
        case "新人":
          this.$router.push("/center/new");
          break;
        case "主持人":
          this.$router.push("/center/host");
          break;
        case "婚庆公司":
          this.$router.push("/center/campany");
          break;
        case "策划师":
          this.$router.push("/center/planner");
          break;
        default:
          this.$router.push("/");
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  background: #c4b4a8;
  height: 124px;
  overflow: hidden;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  .logReg {
    display: flex;
    justify-content: right;
    padding: 0 10px;
    .login {
      border-right: 1px solid #aaa;
      margin-right: 5px;
      padding: 0 5px;
    }
  }
  .user {
    float: right;
    margin-right: 20px;
    line-height: 44px;
  }
}
</style> >

